import React from "react";
import { isEqual } from "lodash";
// 1. 受控组件和非受控组件
// 2. setState是同步还是异步
// 3. react中逻辑复用的方案有哪些
// 4. hooks闭包问题如何解决
// 5. hooks使用有哪些规则
// 6. hooks有什么优点
// 7. 类组件和函数组件有什么区别
// 8. 如何自定义hooks
// 9. react中怎么优化性能
// 10. hooks里面useEffect如何实现类似类组件的生命周期
// 11. React16.8版本前后差异

// 类组件优化的两种方式： PureComponent 和 shouldComponentUpdate
// 函数组件优化： React.memo useMemo useCallback
class App extends React.Component {
    // shouldComponentUpdate 不能在React.PureComponent使用 只能用于 React.Component
    // shouldComponentUpdate -> 生命周期，在render之前执行
    // return true 代表可以继续render
    // return false 不进行render
    componentDidMount() {
        console.log(
            JSON.stringify({
                count: 0,
                obj: {
                    name: "传智播客",
                },
                arr: [1, 2, 3],
                fn() {
                    return 1;
                },
            }) ===
                JSON.stringify({
                    count: 0,
                    obj: {
                        name: "传智播客",
                    },
                    arr: [1, 2, 3],
                    fn() {
                        return 2;
                    },
                })
        ); // true
        console.log(
            isEqual(
                {
                    count: 0,
                    obj: {
                        name: "传智播客",
                    },
                    arr: [1, 2, 3],
                    fn() {
                        return 1;
                    },
                },
                {
                    count: 0,
                    obj: {
                        name: "传智播客",
                    },
                    arr: [1, 2, 3],
                    fn() {
                        return 2;
                    },
                }
            )
        ); // false
    }

    shouldComponentUpdate(nextProps, nextState) {
        // 方案1 JSON.stringify 什么时候不更新写在if 属性为函数会出现问题
        if (JSON.stringify(this.state) === JSON.stringify(nextState)) {
            return false;
        }
        return true;
        // 方案2 isEqual -> lodash提供 属性为函数都打印false
    }
    state = {
        count: 0,
        obj: {
            name: "传智播客",
        },
        arr: [1, 2, 3],
    };

    render() {
        console.log("render 执行了");
        return (
            <div>
                <p>count: {this.state.count}</p>
                <p>obj.name: {this.state.obj.name}</p>
                <p>arr: {this.state.arr}</p>
                <hr />
                <button
                    onClick={() => {
                        this.setState({
                            count: this.state.count + 1,
                        });
                    }}>
                    count + 1
                </button>
                <button
                    onClick={() => {
                        this.setState({
                            obj: { name: "黑马程序员" },
                        });
                    }}>
                    setObjName
                </button>
                <button
                    onClick={() => {
                        this.setState({
                            arr: [2, 1, 3],
                        });
                    }}>
                    setArr
                </button>
            </div>
        );
    }
}

export default App;
